<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人中心</title>
    <link href="${applicationScope.basePath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/index.css">
    <link rel="stylesheet" href="${applicationScope.basePath}/css/comments.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/userhome.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<div class="container" style="margin-top: 80px;">
    <!--
        描述：左侧个人中心栏
    -->
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-12">
                    <div class="thumbnail">
                        <img src="${applicationScope.basePath}/images/header.jpg" alt="" class=""
                             style="border-radius: 50%;width: 140px;height: 140px;">
                        <div class="caption">
                            <h3 style="text-align: center;">${requestScope.user.userName}</h3>
                        </div>
                        <hr>
                        <a id="myWallet" class="btn btn btn-warning btn-block"
                           href="${applicationScope.basePath}/user/space/purse" target="iframePage">我的钱包：${requestScope.purse.balance}元</a>
                        <span disabled="true" class="btn btn-warning btn-block" data-toggle="modal"
                              data-target="#myModal"
                              style="margin-top: 15px;">我的信用积分：${requestScope.user.power}</span>
                    </div>
                </div>
            </div>
            <div class="list-group ">
                <a id="orders" href="${applicationScope.basePath}/user/space/orders" class="list-group-item list-group-item-info ">订单中心</a>
                <a id="notice_list" href="${applicationScope.basePath}/user/space" class="list-group-item list-group-item-info">求购中心<span
                        class="badge">${requestScope.info.total}</span></a>
                <a id="system_msg" href="${applicationScope.basePath}/user/space/sys" class="list-group-item list-group-item-info">系统信息<span
                        class="badge">${requestScope.sys}</span></a>
                <a id="goods_list" href="${applicationScope.basePath}/user/space/goods" class="list-group-item list-group-item-info">我的商品</a>
                <a id="person_msg" href="${applicationScope.basePath}/user/space/msg"
                   class="list-group-item list-group-item-info">个人设置</a>
            </div>
        </div>
        <!--
            描述：右侧个人内容栏
        -->
        <div class="col-md-10">
            <div id="content1">
                <h4>求购中心</h4>
                <hr/>
                <button id="toNeed" class="btn btn-warning pull-right">求购</button>
                <section hidden id="contact-area">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-10 offset-lg-1">
                                <div class="contact-box text-center">
                                    <form id="ajax_contact" action="#" method="post">
                                        <span class="pull-right">/300</span><span class="pull-right"
                                                                                  id="str_num">300</span>
                                        <div class="form-group"><textarea id="commentArea" class="form-control"
                                                                          maxlength="300" id="message"
                                                                          name="detail" rows="5" onkeydown="limit();"
                                                                          placeholder="留言内容*"
                                                                          required="required"></textarea>
                                        </div>
                                        <button type="submit">提 交</button>
                                        <button id="cancel" type="reset">取 消</button>
                                        <div id="form-messages"></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <div class="share_content">
                    <h4 style="text-align: center;">求购信息</h4>
                    <hr>
                    <div id="need_content" class="yes_share">
                        <c:if test="${empty requestScope.info.list}">
                            <p style="text-align: center;">暂无求购信息</p>
                        </c:if>
                        <c:if test="${!empty requestScope.info.list}">
                            <c:forEach items="${requestScope.info.list}" var="item" varStatus="vs">
                                <button type="button" class="btn btn-info" onclick="viewPersonal(18)"
                                        style="background-color: #0ab4ff;border:0px;outline:none;">${item.user.userName}
                                </button>
                                <span>：&nbsp;&nbsp;${item.detail}</span><br>
                                <p style="text-align:right;color:#b6b4b9;">发布时间：${item.start_date}</p>
                                <hr>
                                <br>
                            </c:forEach>
                        </c:if>
                    </div>
                </div>
                <c:if test="${requestScope.info.nextPage != 0}">
                    <div id="page" style="text-align: center;">
                        <button id="moreMsg" class="btn bg-info">点击加载更多</button>
                        <input id="nextValue" type="hidden" value="${requestScope.info.nextPage}"/>
                    </div>
                </c:if>
                <c:if test="${requestScope.info.nextPage == 0}">
                    <div style="text-align: center;">
                        <span class="btn bg-info">没有更多了</span>
                    </div>
                </c:if>
            </div>
        </div>
    </div>
</div>
<footer>
    <hr/>
    <p style="text-align: center;">&copy; 二手交易平台 2020</p>
</footer>
<script src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
<script>
    //限制文本域中的字符数
    function limit(event) {
        $('#str_num').text(300 - ($('#commentArea').val().length));
    }


    $(function () {

        $("#toNeed").on('click', function () {
            $('#contact-area').toggle();
            $(this).hide();
        });

        $('#cancel').on("click", function () {
            $('#contact-area').toggle();
            $("#toNeed").toggle();
            $("#str_num").text(300);
        });


        $("#moreMsg").on("click", function () {
            let pn = $("#nextValue").val();
            $("#moreMsg").button('loading');
            $.ajax({
                url: "${applicationScope.basePath}/user/space/need/" + pn,
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    $("#moreMsg").button('reset');
                    if (data.nextPage === 0) {
                        $('#page').empty();
                        $('#page').append(' <span class="btn bg-info">没有更多了</span>');
                    }
                    <!-- 处理后端返回的数据 -->
                    $("#nextValue").attr("value", data['nextPage']);
                    $.each(data.list, function (i, n) {
                        $('#need_content').append(' <button type="button" class="btn btn-info" onclick="viewPersonal(18)"\n' +
                            '                                style="background-color: #0ab4ff;border:0px;outline:none;">' + n.user.userName + '\n' +
                            '                        </button>\n' +
                            '                        <span>：&nbsp;&nbsp;' + n.detail + '</span><br>\n' +
                            '                        <p style="text-align:right;color:#b6b4b9;">发布时间：' + n.start_date + '</p>\n' +
                            '                        <hr>\n' +
                            '                        <br>');
                    });

                },
                error: function (data) {
                    //跳转到错误页面
                }
            });
        });

        $("#ajax_contact").submit(function (encodedURIComponent) {
            //获取表单信息,转化为json字符串
            let data = JSON.stringify($("#ajax_contact").serializeJSON());
            $.ajax({
                url: "${applicationScope.basePath}/user/space/need",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: data,
                success:function (data) {
                    if (data.flag) {
                        $("#commentArea").val('');
                        $("#str_num").text(300);
                        alert("提交成功，待管理员审核！");
                    } else {
                        alert("提交失败，请稍后重试！");
                    }
                },
                error: function (data) {
                    //跳转到错误页面
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
